<template>
	<d2-container>
		<template slot="header">
			<el-form ref="userForm" :model="userForm" class="header-area" label-width="110px" style="height: auto">
				<template>
					<el-row>
						<el-col :span="3">
							<el-form-item label="用户名：" prop="userName">
								<div>{{ userName }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="3">
							<el-form-item label="手机号：" prop="phone">
								<div>{{ phone }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="3">
							<el-form-item label="昵称：" prop="nickName">
								<div>{{ nickName ? nickName : '' }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="3">
							<el-form-item label="真实姓名：" prop="realName">
								<div>{{ realName ? realName : '' }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="账户余额：" prop="balance">
								<div>{{ userForm.balance }}元</div>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="冻结金额：" prop="amountFrozen">
								<div>{{ userForm.amountFrozen }}元</div>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="累计金额：" prop="amountAccumulated">
								<div>{{ userForm.amountAccumulated }}元</div>
							</el-form-item>
						</el-col>
					</el-row>
				</template>
			</el-form>
		</template>
		<template>
            <el-form ref="queryForm" :model="queryForm" class="header-area" label-width="110px" style="height: auto">
              <template>
				<el-row>
						<el-col :span="8">
							<el-form-item label="时间段：" prop="time">
								<el-date-picker
									v-model="time"
									type="datetimerange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
								></el-date-picker>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<el-form-item label="类型：" prop="flowType">
								<el-select v-model="queryForm.flowType" style="width: 100%" placeholder="请选择类型">
									<el-option label="全部" value=""></el-option>
									<el-option label="收入" value="1"></el-option>
									<el-option label="支出" value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<el-form-item label="来源：" prop="flowSource">
								<el-select v-model="queryForm.flowSource" style="width: 100%" placeholder="请选择来源">
									<el-option label="全部" value=""></el-option>
									<el-option label="券购买" value="1"></el-option>
									<el-option label="注册赠送" value="2"></el-option>
									<el-option label="冻结" value="3"></el-option>
									<el-option label="释放" value="4"></el-option>
									<el-option label="释放退回" value="5"></el-option>
									<el-option label="退回" value="6"></el-option>
									<el-option label="支付" value="7"></el-option>
									<el-option label="合作伙伴赠送" value="8"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<el-form-item label="来源类型：" prop="flowSourceType">
								<el-select v-model="queryForm.flowSourceType" style="width: 100%" placeholder="请选择来源类型">
									<el-option label="全部" value=""></el-option>
									<el-option label="购买" value="1"></el-option>
									<el-option label="赠送" value="2"></el-option>
									<el-option label="冻结" value="3"></el-option>
									<el-option label="释放" value="4"></el-option>
									<el-option label="释放退回" value="5"></el-option>
									<el-option label="退回" value="6"></el-option>
									<el-option label="支付" value="7"></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<div class="search-submit">
								<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
								<el-button type="primary" size="medium" plain @click="resetForm('queryForm')">重置</el-button>
							</div>
						</el-col>
					</el-row>
			  </template>
		    </el-form>
		</template>
		<template>
			<el-table stripe border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="serialNum" label="流水号"></el-table-column>
				<el-table-column prop="flowType" label="类型">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.flowType == 1">收入</el-tag>
						<el-tag v-if="scope.row.flowType == 2">支出</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="flowSource" label="来源">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.flowSource == 1">券购买</el-tag>
						<el-tag v-if="scope.row.flowSource == 2">注册赠送</el-tag>
						<el-tag v-if="scope.row.flowSource == 3">冻结</el-tag>
						<el-tag v-if="scope.row.flowSource == 4">释放</el-tag>
						<el-tag v-if="scope.row.flowSource == 5">释放退回</el-tag>
						<el-tag v-if="scope.row.flowSource == 6">退回</el-tag>
						<el-tag v-if="scope.row.flowSource == 7">支付</el-tag>
						<el-tag v-if="scope.row.flowSource == 8">合作伙伴赠送</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="flowSourceType" label="来源类型">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.flowSourceType == 1">购买</el-tag>
						<el-tag v-if="scope.row.flowSourceType == 2">赠送</el-tag>
						<el-tag v-if="scope.row.flowSourceType == 3">冻结</el-tag>
						<el-tag v-if="scope.row.flowSourceType == 4">释放</el-tag>
						<el-tag v-if="scope.row.flowSourceType == 5">释放退回</el-tag>
						<el-tag v-if="scope.row.flowSourceType == 6">退回</el-tag>
						<el-tag v-if="scope.row.flowSourceType == 7">支付</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="amountBefore" label="变更前金额(元)"></el-table-column>
				<el-table-column prop="amountChange" label="变更金额(元)"></el-table-column>
				<el-table-column prop="amountAfter" label="变更后金额(元)"></el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" :formatter="forDateCreate"></el-table-column>
			</el-table>
		</template>
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
	</d2-container>
</template>
<script>
import { findCouponAccountByUserId, findCouponAccountFlowListByPage } from '@api/martUser/couponAccount'
import dayjs from 'dayjs'
export default {
  name: 'martUser-couponAccountFlow',
  components: {},
  data () {
    return {
      userId: '',
      userName: '',
	  phone: '',
	  nickName: '',
      realName: '',
      userForm: {
        balance: 0,
        amountFrozen: 0,
        amountAccumulated: 0
      },
      queryForm: {
        beginDate: '',
        endDate: '',
        flowType: '',
        flowSource: '',
        flowSourceType: ''
      },
	  time: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: []
    }
  },

  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.loading = true
      findCouponAccountByUserId({
        userId: this.userId
      })
        .then(res => {
          this.userForm.balance = res.data.balance
          this.userForm.amountAccumulated = res.data.amountAccumulated
          this.userForm.amountFrozen = res.data.amountFrozen
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })

      findCouponAccountFlowListByPage({
        userId: this.userId,
        beginDate: this.queryForm.beginDate == '' ? '' : dayjs(this.queryForm.beginDate[0]).format('YYYY-MM-DD HH:mm:ss'),
        endDate: this.queryForm.endDate == '' ? '' : dayjs(this.queryForm.endDate[1]).format('YYYY-MM-DD HH:mm:ss'),
        flowType: this.queryForm.flowType,
        flowSource: this.queryForm.flowSource,
		flowSourceType: this.queryForm.flowSourceType,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
        .then(res => {
          this.tableData = res.data.content
          this.total = res.data.total
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.fetchData()
    },
    forDateCreate (row, column) {
      return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    resetPage () {
      (this.currentPage = 1), (this.pageSize = 10), (this.total = 0)
    },
    submitForm (formName) {
      this.resetPage()
      this.fetchData()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
	  this.time = []
      this.resetPage()
      this.fetchData()
    }
  },
  created () {
    this.userId = sessionStorage.getItem('userId')
	this.userName = sessionStorage.getItem('userName')
	this.phone = sessionStorage.getItem('phone')
    this.nickName = sessionStorage.getItem('nickName')
    this.realName = sessionStorage.getItem('realName')
  }
}
</script>
